* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: green;
  font-weight: 600;
  padding: 0 5px;
  &:hover{
    text-decoration: underline;
    color: rgb(89, 160, 148);
  }
}
#app {
  width: 800px;
  
  
  box-shadow: 0 5px 10px rgb(203, 183, 183);
  margin: 100px auto;
  .head {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: center;
    background-color: rgba(241, 220, 98, 0.445);
  }
  .body {
    padding: 15px;
    background-color: rgba(203, 206, 47, 0.603);
      .add {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 600;
        color: forestgreen;
        input{
          height: 25px;
          outline: none;
          border: 1px solid rgb(97, 104, 144);
          background-color: rgba(152, 184, 63, 0.466);
          color: rgb(95, 91, 55);
          padding-left: 10px;
          
        }
        input[disabled=disabled]{  
          background-color: rgba(215, 218, 218, 0.74);
        }
        label{
          margin-left: 20px;
        }
        .btn{
          margin-left: 40px;
          margin-right: 20px;
          outline: none;
          display: block;
          padding: 2px 10px;
          background-color: rgba(134, 157, 149, 0.534);
        }
        
      }
      table{
        text-align: center;
        width: 100%;
        tr{
            
            &:hover{
              background-color: rgba(184, 203, 77, 0.397);
            }
        }
        td{
          width: 20%;
          padding: 10px;
          border-bottom: 1px dashed rgba(50, 96, 108, 0.712);
          
        }
      }  
         
     
  }
}
